<template>
  <header>
    <div class="logo"></div>
    <div class="menu">
      <Dropdown overlayClassName="header-menu" placement="bottom" v-for="menu in menus" :key="menu.key">
        <div class="menu-item" :class="{ 'active': activeMenuKey === menu.key }">{{ menu.label }}</div>
        <template #overlay>
          <Menu>
            <MenuItem v-for="item in menu.items" :key="item.key">{{ item.label }}</MenuItem>
          </Menu>
        </template>
      </Dropdown>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { Dropdown, Menu, MenuItem } from 'ant-design-vue'

const menus = ref([
  {
    key: 'risk',
    label: '数智金融决策',
    items: [
      { label: '平台首页', key: 'index' },
      { label: '风险发现', key: 'risk-finding' },
      { label: '风险分析', key: 'risk-analysis' },
      { label: '风险演化', key: 'risk-evolution' },
      { label: '风险决策', key: 'risk-decision' },
    ],
  },
  {
    key: 'data',
    label: '数据资源可视化',
    items: [
      { label: '数据首页', key: 'data-index' },
      { label: '舆情数据', key: 'data-sentiment' },
      { label: '关联数据', key: 'data-correlation' },
      { label: '评估数据', key: 'data-assess' },
    ],
  },
  {
    key: 'programme',
    label: '应用验证',
    items: [
      { label: '方案首页', key: 'programme-index' },
      { label: '企业风险评估', key: 'enterprise-risk-assessment' },
      { label: '黑灰账户识别', key: 'account-identification' },
      { label: '票据欺诈检测', key: 'bill-fraud-detection' },
      { label: '信贷风险控制', key: 'credit-risk-control' },
    ],
  },
])
const activeMenuKey = ref('risk')
</script>

<style lang="scss" scoped>
header {
  height: 90px;
  background-color: rgba($color: #000, $alpha: .02);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu {
  height: 40px;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.menu-item {
  margin-left: 12px;
  padding: 2px 22px 4px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  cursor: pointer;

  &.active {
    border-bottom-color: #fff;
  }
}
</style>

<style lang="scss">
.ant-dropdown.header-menu {
  min-width: 180px !important;

  .ant-dropdown-menu-title-content {
    font-size: 22px !important;
    color: #ddd !important;
    font-weight: 400;
    line-height: 1.375;
  }
  .ant-dropdown-menu {
    border-radius: 0 !important;
    background-color: rgba($color: #f7f0e2, $alpha: .15);
    box-shadow: none !important;
    text-align: center;
  }
  .ant-dropdown-menu-item {
    &:hover .ant-dropdown-menu-title-content {
      color: #8febff !important;
    }
  }
}
</style>
